@model WidgetTemplateViewModel
@{
    Style.Reqiured("Layout").AtFoot();
}
<div class="panel panel-default">
    <div class="panel-heading">
        <div class="form-inline">
            <div class="form-group">
                <label for="exampleInputName2">@L("Search")</label>
                <input id="search" class="form-control" type="text" placeholder="@L("Enter keyworkds to search...")" />
            </div>
            <div class="form-group">
                @L("Select widget then double click or click next.")
            </div>
        </div>
    </div>
    <div class="panel-body template-list">
        @using (Html.BeginForm("RedirectToWidget", "WidgetTemplate", new { Model.PageId, Model.LayoutId, Model.ZoneId, Model.RuleID, Model.ReturnUrl }))
        {
            <div class="row">
                @foreach (var template in Model.PredefinedTemplates)
                {
                    <div class="col-lg-2 col-md-3 col-sm-4 thumb-item">
                        <div>
                            <input type="radio" name="WidgetID" value="@template.ID" />
                            <div class="thumbnail">
                                <div class="img" for="template-@template.ID">
                                    <img src="@Url.Content(template.Thumbnail.IsNullOrWhiteSpace() ? "~/images/template.png" : template.Thumbnail)" alt="@template.WidgetName" />
                                </div>
                                <label>
                                    @template.WidgetName
                                </label>
                            </div>
                        </div>
                    </div>
                }
            </div>
            <div class="row">
                @foreach (var item in Model.WidgetTemplates.GroupBy(m => m.GroupName).OrderBy(m => m.Key))
                {
                    foreach (WidgetTemplateEntity template in item.OrderBy(m => m.Order))
                    {
                        <div class="col-lg-2 col-md-3 col-sm-4 thumb-item">
                            <div>
                                <input type="radio" name="WidgetTemplateID" value="@template.ID" />
                                <div class="thumbnail">
                                    <div class="img" for="template-@template.ID">
                                        <img src="@Url.Content(template.Thumbnail)" alt="@template.Title" />
                                    </div>
                                    <label>
                                        @L(template.Title)
                                    </label>
                                </div>
                            </div>
                        </div>
                    }
                }
            </div>
            <div class="toolBar">
                <input id="design" type="submit" class="btn btn-primary" value="@L("Next")" />
                @if (Model.CanPasteWidget)
                {
                    <a class="btn btn-warning" href="@Url.Action("PasteAndRedirect", "Widget", new { Model.LayoutId, Model.PageId,Model.ZoneId,Model.ReturnUrl })">
                        <i class="glyphicon glyphicon-paste"></i>
                        @L("Paste")
                    </a>
                }
                <input type="button" class="btn btn-default cancel" value="@L("Cancel")" />
            </div>
        }
    </div>
</div>
@using (Script.AtFoot())
{
    <script type="text/javascript">
        $(function () {
            $(".template-list input[type=radio]:first").prop("checked", true);
            $(document).on("dblclick", ".template-list .thumbnail" ,function () { $("form").submit(); });
            $(document).on("click", ".template-list .thumbnail", function () {
                $(".template-list input[type=radio]").prop("checked", false);
                $("input[type=radio]", $(this).closest(".thumb-item")).prop("checked", true);
            });
            $(document).on("keyup", "#search", function () {
                var keyWord = $(this).val();
                if (keyWord) {
                    keyWord = keyWord.toLowerCase();
                    $(".thumb-item").each(function () {
                        if ($(this).text().toLowerCase().indexOf(keyWord) < 0) {
                            $(this).addClass("hide");
                        } else {
                            $(this).removeClass("hide");
                        }
                    });
                }
                else {
                    $(".thumb-item.hide").removeClass("hide");
                }
            });
        });
    </script>
}